<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令(中)</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <!-- v-show -->
    <p v-show="flag">p1</p>
    <p v-show="!flag">p2</p>

    <!-- v-if、v-else-if、v-else -->
    <p v-if="age < 5">婴儿</p>
    <p v-else-if="age < 18">未成年</p>
    <p v-else-if="age < 30">青年</p>
    <p v-else-if="age < 60">中年</p>
    <p v-else>老年</p>

    <!-- v-for -->
    <!-- 循环数组 -->
    <ul>
        <li v-for="item in arr">{{ item }}</li>
    </ul>

    <!-- 循环对象数组 -->
    <ul>
        <li v-for="user in users">{{ user.id }}--{{ user.name }}--{{user.salary}}</li>
    </ul>

    <!--
        循环数字
        指定一个数字的值
        会从1开始循环,每次自增1,一直到指定的数字的值位置
        相当于for(int i = 1; i <= num; i++)
     -->
    <ul>
        <li v-for="i in num">{{i}}</li>
    </ul>

</div>
<script>
    new Vue({
        el:"#d1",
        data:{
            flag:true,
            age: 20,
            arr:['孙尚香','诸葛亮','曹操','李白','蔡文姬'],
            users:[
                {
                    id:1,
                    name:'孙尚香',
                    salary:100000
                },
                {
                    id:2,
                    name:'诸葛亮',
                    salary:80000
                },
                {
                    id:3,
                    name:'曹操',
                    salary:60000
                },
                {
                    id:4,
                    name:'李白',
                    salary:80000
                },
                {
                    id:5,
                    name:'蔡文姬',
                    salary:40000
                }
            ],
            num:10
        }
    });
</script>
</body>
</html>